<template>
  <nav>
    <ul class="banxin">
      <li @click="$router.push('/')" :class="{ active: $route.path == '/' }">
        推荐
      </li>
      <li
        @click="$router.push('/paihangbang')"
        :class="{ active: $route.path == '/paihangbang' }"
      >
        排行榜
      </li>
      <li
        @click="$router.push('/gedan')"
        :class="{ active: $route.path == '/gedan' }"
      >
        歌单
      </li>
      <li
        @click="$router.push('/zhubodiantai')"
        :class="{ active: $route.path == '/zhubodiantai' }"
      >
        主播电台
      </li>
      <li
        @click="$router.push('/geshou')"
        :class="{ active: $route.path == '/geshou' }"
      >
        歌手
      </li>
      <li
        @click="$router.push('/xindie')"
        :class="{ active: $route.path == '/xindie' }"
      >
        新碟上架
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {};
  },
  creads() {},
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
nav {
  box-sizing: border-box;
  background-color: #c20c0c;
  ul {
    height: 37px;
    display: flex;
    justify-content: center;
    align-content: center;
    color: white;
    box-sizing: border-box;
    li {
      height: 20px;
      margin-right: 40px;
      border-radius: 20px 20px 20px 20px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 14px;
      margin-top: 10px;
      text-align: center;
      &.active {
        background-color: #9b0909;
      }
      &:hover {
        background-color: #9b0909;
      }
    }
  }
}
</style>